<template lang="">
  <!-- 内容列表 -->
  <div class="articleList" ref="artList">
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      @load="onLoad"
    >
       <van-cell  v-for="(item, index) in list" :key="index"  @click="$router.push({ path: '/article', query: { id: item.art_id } })" :title="item.title">
        <template #label>
          <van-grid :column-num="item.cover.type"  :border="false" >
            <van-grid-item
              v-for="(item,index) in item.cover.images"
              :key="index"
            >
             <van-image style="height:150px;" fit="cover" :src="item" />
            </van-grid-item>
          </van-grid>
          <div class="meta">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | reltTime }}</span>
            <van-icon class="x" @click.stop="Report(item.art_id.toString(),index)" name="cross" style="float:right;"/>
          </div>
        </template>
      </van-cell>
    </van-list>
    </van-pull-refresh>
      <van-popup v-model="jbshow">
      <van-cell @click="uninterested" title="不感兴趣"  />
      <van-cell @click="fkshow=true" title="反馈垃圾信息" is-link />
      <van-cell @click="uninterested" title="拉黑作者" />
      </van-popup>
      <van-popup v-model="fkshow">
      <van-nav-bar @click-left="" left-text="返回" left-arrow />
       <van-cell @click="ReportContent(item.type)" v-for="item in reportList"  :title="item.name"  />
      </van-popup>
  </div>
</template>
<script>
import { getArticleAPI } from "@/api";
import { dislikeAPI } from "@/api";
import { reportsAPI } from "@/api";
export default {
  props: [ 'channel_id' ],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: new Date().getTime(),
      isLoading: false,
      jbshow:false,
      fkshow:false,
      fkcg:false,
      currentIdx:'',
       reportList: [
        { type: 0, name: "其他问题" },
        { type: 1, name: "标题夸张" },
        { type: 2, name: "低俗色情" },
        { type: 3, name: "错别字多" },
        { type: 4, name: "旧闻重复" },
        { type: 5, name: "广告软件" },
        { type: 6, name: "内容不实" },
        { type: 7, name: "涉嫌违法犯罪" },
        { type: 8, name: "侵权" },
      ],
      scrollTop: 0,
    };
  },
  methods: {
    async onLoad() {
      let res = await getArticleAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });
      // console.log('...',res)
      this.timestamp = res.data.data.pre_timestamp;
      this.list.push(...res.data.data.results);
      this.loading = false;
      // console.log(this.timestamp);
      if (this.timestamp == null) {
        this.finished = true;
      }
    },
      async onRefresh() {
      let res = await getArticleAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      });
      this.list = res.data.data.results
      this.timestamp = res.data.data.pre_timestamp;
      this.isLoading = false
    },
    Report(art_id,index){
      this.jbshow = true
      this.art_id =art_id
      this.currentIdx =index
    },
     async uninterested(){
       let res = await dislikeAPI(this.art_id)
      //  console.log(res);
      this.$toast.success('拉黑文章成功')
      this.list.splice(this.currentIdx,1)
      this.jbshow = false
   },
     async ReportContent(type){
       let res = await reportsAPI(this.art_id,type)
      //  console.log(res);
      this.$toast.success('举报成功')
      this.fkshow =false
      this.list.splice(this.currentIdx,1)
      this.jbshow = true
   },
   
  
  },
   mounted() {
    // 给dom盒子加滚动事件
    this.$refs.artList.onscroll = () => {
      this.scrollTop = this.$refs.artList.scrollTop;
      console.log(this.$refs.artList.scrollTop);
    };
  },
   activated() {
    // 激活时再把之前的滚动条的高度赋值给滚动条，让它滚到对应的位置
    this.$refs.artList.scrollTop = this.scrollTop;
  },
};
</script>
<style lang="less">
 .articleList{
   position: fixed;
   width: 100%;
   left: 0;
   top: 90px;
   bottom: 50px;
   overflow: scroll ;
   .meta {
     span{

       margin-right:20px
     }
     .xx{
       z-index: 9999;
     }
   }

 }

</style>
